<template>
  <div>
    <section class="todoapp">
      <todo-header></todo-header>
      <todo-main @stateChange="getState"></todo-main>
      <todo-footer ></todo-footer>
    </section>
  </div>
</template>

<script>
// 导入组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
import {mapState} from "vuex"

export default {
  name: "VuexTodolistApp",
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {
    getState(e) {
      console.log(e);
      this.$store.commit("todo/updateState", e);
    },
  },
  computed:{
    ...mapState('todo',['list'])
  },
  watch:{
    list:{
      deep:true,
      handler(){
        localStorage.setItem("list", JSON.stringify(this.list));

      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>